<template>
  <div class="section-wrap">
   <div class="headerBox">
    <div class="header">
      <x-icon type="ios-arrow-left" size="" class="icon-white" @click="goBack"></x-icon>
      <a class="saveBtn" @click="saveItem">保存</a>
    </div>
    </div>
    <div class="form-section" style="margin-top: 40px;">
      <div class="form-item form-item-style2">
        <div class="label-title space-between">
          <div class="space-between">
            <label>关键要求</label>
          </div>
          <span @click="unfoldMeasure = !unfoldMeasure">{{unfoldMeasure?'收起': '展开'}}</span>
        </div>
        <div>
          <p class="textarea"
             :class="{'unfold':unfoldMeasure}">{{data.keyRequire}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <group style="width:100%;">
          <x-switch v-model="data.isMissingItem" :value-map="[0,1]" :title="title" @on-change="changeIsMissing"></x-switch>
        </group>

      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>应得分</label>
        </div>
        <p>{{data.shouldScore}}</p>
      </div>
      <div class="form-item form-item-style1">
        <group style="width:100%;">
          <x-number :title="titleActualScore" v-model="data.actualScore" :min="0" :max="data.shouldScore" :disabled="fillable"></x-number>
        </group>
      </div>
      <div class="form-item form-item-style2">
        <div class="label-title space-between">
          <div class="space-between">
            <label>问题图片</label>
          </div>
          <span>当前共{{imgList.length}}张照片</span>
        </div>
        <div class="upload-wrap">
          <upload @setFormData="uploadData"></upload>
        </div>
      </div>
      <div class="form-item form-item-style2">
        <group>
          <x-textarea v-model="data.deductionReason" :title="titleReason" :max="50"></x-textarea>
        </group>
      </div>
    </div>
  </div>
</template>
<script>
import upload from "@/commonComponents/upload/index";
import { XSwitch, Group, XNumber, XTextarea } from "vux";
export default {
  props: {
    data: {
      type: Object,
      default: function() {
        return {
          keyRequire: "",
          shouldScore: 0,
          actualScore: "",
          deductionReason: ""
        };
      }
    }
  },
  data() {
    return {
      unfoldMeasure: false, // 是否展开
      imgList: [],
      title: "合理缺项",
      titleActualScore: "实际得分",
      fillable: false,
      titleReason: "扣分原因"
    };
  },
  components: {
    upload,
    XSwitch,
    Group,
    XNumber,
    XTextarea
  },
  methods: {
    goBack() {
      this.$emit("nodeClick");
    },
    changeIsMissing(val) {
      if (val == "1") {
        this.data.shouldScore = 0;
        this.data.actualScore = 0;
        this.fillable = true;
      } else {
        this.data.shouldScore = this.data.oldShouldScore;
        this.shouldScore = false;
      }
    },
    saveItem() {
      this.$emit("save", this.data);
    },
    uploadData(data, length, uploadImgs, images) {
      let that = this;
      debugger;
      that.$axiosAjax.uploadFile(data).then(res => {
        debugger;
      });
      this.data.fileList = uploadImgs;
    }
  }
};
</script>
<style lang="less" scoped>
.section-wrap {
  height: 100vh;
}

.select-section {
  display: flex;
}

.select-section div {
  padding-left: 26px;
  background: url(../../../static/images/select.png) no-repeat left center;
  background-size: 17px 17px;
}

.select-section div:first-child {
  margin-right: 58px;
}

.select-section .active {
  background: url(../../../static/images/selected.png) no-repeat left center;
  background-size: 17px 17px;
}

.weui-cell_switch {
  width: 100%;
}

a {
  height: 40px;
  border-radius: 20px;
  display: inline-block;
  width: 200px;
  text-align: center;
  line-height: 40px;
  color: #fff;
}

.saveBtn {
  float: right;
  border: 1px solid;
  border-radius: 0;
  width: 200px;
}
</style>

